<template>
  <div class="dy-main AdvantageOfWeek">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">周利宝</x-header>
    </div>
    <div class="dy-body">
      <div class="topOption">
        <div @click="chooseOption('1')" :class="{isCheck: isChecked}">周利宝开立</div>
        <div @click="chooseOption('2')" :class="{isCheck: !isChecked}">周利宝支取</div>
      </div>
      <div class="infoGroup" v-if="isChecked">
        <group gutter="0">
          <cell :title="('付款账号')" @click.native="showPopupPicker1 = true" :value="value1[0]" is-link></cell>
          <cell :title="('币种')" @click.native="showPopupPicker2 = true" :value="value2[0]" is-link></cell>
          <cell :title="('可用余额')" :value="usefulAmount"></cell>
          <cell :title="('转存余额')" :value="transferBalance"></cell>
        </group>
        <group>
          <popup-picker :show.sync="showPopupPicker1" :show-cell="false" :data="list1" v-model="value1"></popup-picker>
          <popup-picker :show.sync="showPopupPicker2" :show-cell="false" :data="list2" v-model="value2"></popup-picker>
        </group>
        <div class="confirmButton" @click="confirm()">确认</div>
        <div class="tipMsg">
          <div>温馨提示：</div>
          <div>七天后自动转账到活期账户</div>
        </div>
      </div>
      <div class="infoGroup" v-if="!isChecked">
        <group gutter="0">
          <cell :title="('付款账号')" @click.native="showPopupPicker3 = true" :value="value4[0]" is-link></cell>
          <cell :title="('存入日')" :value="depositDate"></cell>
          <cell :title="('到期日')" :value="expireDate"></cell>
          <cell :title="('年利率')" :value="rateYear"></cell>
          <cell :title="('存期')" :value="depositTerm"></cell>
          <cell :title="('本金(元)')" :value="principal"></cell>
          <cell :title="('定期账户')" @click.native="showPopupPicker4 = true" :value="value4[0]" is-link></cell>
        </group>
        <group>
          <popup-picker :show.sync="showPopupPicker1" :show-cell="false" :data="list1" v-model="value1"></popup-picker>
          <popup-picker :show.sync="showPopupPicker2" :show-cell="false" :data="list2" v-model="value2"></popup-picker>
          <popup-picker :show.sync="showPopupPicker3" :show-cell="false" :data="list3" v-model="value3"></popup-picker>
          <popup-picker :show.sync="showPopupPicker4" :show-cell="false" :data="list4" v-model="value4"></popup-picker>
        </group>
        <div class="confirmButton" @click="extract()">支取</div>
      </div>
      <div class="confirmWindow">
        <zx-dialog v-model="tipsShow1" title="提示" type="tips" butType="choose" :data="['取消', '确认']" @on-click-no="clickNo('1')" @on-click-yes="clickYes('1')">
          <div slot="body" class="tips tipsMsg">
            未到期定期款项将已活期利率计算，是否继续？
          </div>
        </zx-dialog>
        <zx-dialog v-model="tipsShow2" title="金额确认" type="tips" butType="choose" :data="['取消', '确认']" @on-click-no="clickNo('2')" @on-click-yes="clickYes('2')">
          <div slot="body" class="tips">
            <div class="confirmWindowTop" v-if="where === 'confirm'">
              <div>定存金额</div>
              <div>{{ transferBalance }}</div>
            </div>
            <div class="confirmWindowTop" v-if="where === 'extract'">
              <div>本金</div>
              <div>{{ transferBalance }}</div>
            </div>
            <div class="confirmWindowBottom">
              <div>图形码</div>
              <div><input type="text" :value="imgCodeValue" class="imgCodeInput" placeholder="请输入验证码"></div>
              <div><img @click="getImgCode()" class="imgCode" src="../../assets/img/imgCode.png"></div>
            </div>
          </div>
        </zx-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isChecked: true,
      usefulAmount: '10,000.00',
      transferBalance: '100,000.00',
      depositDate: '2010-02-01',
      expireDate: '2018-03-01',
      rateYear: '1.231%',
      depositTerm: '2年',
      principal: '50.00',
      value1: ['请选择'],
      list1: [['请选择', '6223 **** **** 1111', '6223 **** **** 2222', '6223 **** **** 3333']],
      value2: ['请选择'],
      list2: [['请选择', '人民币', '美元', '欧元']],
      value3: ['请选择'],
      list3: [['请选择', '6223 **** **** 1111', '6223 **** **** 2222', '6223 **** **** 3333']],
      value4: ['请选择'],
      list4: [['请选择', '6223 **** **** 1111', '6223 **** **** 2222', '6223 **** **** 3333']],
      showPopupPicker1: false,
      showPopupPicker2: false,
      showPopupPicker3: false,
      showPopupPicker4: false,
      tipsShow1: false,
      tipsShow2: false,
      show1: false,
      show2: false,
      imgCodeValue: '',
      where: ''
    }
  },
  methods: {
    chooseOption (i) {
      if (i === '1') {
        this.isChecked = true
      } else {
        this.isChecked = false
      }
    },
    confirm () {
      this.tipsShow2 = true
      this.where = 'confirm'
    },
    extract () {
      this.tipsShow1 = true
    },
    clickNo (i) {
      if (i === '1') {
        this.tipsShow1 = false
        this.where = ''
      } else {
        this.tipsShow2 = false
        this.where = ''
      }
    },
    clickYes (i) {
      if (i === '1') {
        this.tipsShow1 = false
        this.tipsShow2 = true
        this.where = 'extract'
      } else {
        if (this.where === 'confirm') {
          console.log('确定')
          this.where = ''
          this.tipsShow2 = false
          this.$router.push({name: 'AdvantageOfWeekResult', query: {'type': '1'}})
        } else {
          console.log('支取')
          this.where = ''
          this.tipsShow2 = false
          this.$router.push({name: 'AdvantageOfWeekResult', query: {'type': '2'}})
        }
      }
    },
    getImgCode () {
    },
    back () {
      this.$publicFun.goBack(this)
    }
  }
}
</script>

<style lang="less">
.AdvantageOfWeek{
  .dy-body{
    .topOption{
      width: 100%;
      height: 1.4rem;
      padding: 0.4rem 1.75rem;
      display: flex;
      >div{
        flex: 1;
        border: 1px solid #EC1B30;
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.28rem;
        color: #fff;
        background: #EC1B30;
      }
      .isCheck{
        color: #EC1B30;
        background: #fff;
      }
    }
    .infoGroup{
      .tipMsg{
        height: 0.7rem;
        >div{
          color: #999999;
          font-size: 0.26rem;
          line-height: 0.35rem;
          padding-top: 0.44rem;
          padding-left: 0.3rem;
        }
        >div:nth-child(2){
          padding-top: 0.2rem;
        };
      }
      .confirmButton{
        height: 0.88rem;
        line-height: 0.88rem;
        width: 6.9rem;
        margin: 0 auto;
        background: #EC1B30;
        text-align: center;
        border-radius: 0.06rem;
        color: #fff;
        font-size: 0.34rem;
      }
    }
    .confirmWindow{
      border-top: 1px solid #EAEAEA;
      .tipsMsg{
        margin: 0.6rem 0;
      }
      .confirmWindowTop{
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.28rem;
        margin-top: 0.2rem;
        margin-bottom: 0.3rem;
        >div{
          display: inline-block;
        }
        >div:nth-child(1){
          width: 1.65rem;
        };
        >div:nth-child(2){
          color: #FF6633;
        };
      }
      .confirmWindowBottom{
        height: 0.6rem;
        line-height: 0.6rem;
        margin-bottom: 0.7rem;
        position: relative;
        >div{
          display: inline-block;
        }
        .imgCodeInput{
          width: 2rem;
          height: 0.6rem;
          margin-left: 0.8rem;
        }
        .imgCode{
          position: relative;
          width: 1.4rem;
          height: 0.6rem;
          top: 0.2rem;
        }
      }
    }
  }
}
</style>
